<template>
  <!-- 流程表单详情抽屉 -->
  <div class="flow-flowForm-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>流程表单详情-{{state.formData.name}}</h4>
      </template>
      <div class="form-create-show">
        <FormCreate :option="detailData.option" :rule="detailData.rule" @submit="handleSubmit" v-model="formData" />
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
// 引入 form-create
import formCreate from '@form-create/element-ui'
// 引入 form-create-edit
import FcEditor from "@form-create/component-wangeditor";
import {reactive, ref, getCurrentInstance, toRefs} from 'vue';
import {addFlowFormData, editFlowFormData, getFlowForm, getFlowFormData} from "/@/api/flow/flowForm";
import {
  FlowFormInfoData,
  FlowFormEditState, FlowFormTableColumns
} from "/@/views/flow/flowForm/list/component/model"
import {setConfAndFields2} from "/@/utils/formCreate";
import {ElMessage} from "element-plus";
formCreate.component(FcEditor)
//获取 formCreate 组件
const FormCreate = formCreate.$form();
defineOptions({ name: "addFormData"})
const props = defineProps({
  statusOptions:{
    type:Array,
    default:()=>[]
  },
})
const emit = defineEmits(['getFormDataList'])
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
const dataId = ref(0)
const formData = ref({});
const detailData = ref({
  rule: [],
  option: {}
})
const state = reactive<FlowFormEditState>({
  loading:false,
  isShowDialog: false,
  formData: {
    id: undefined,
    name: undefined,
    status: false ,
    remark: undefined,
    createdAt: undefined,
    updatedAt: undefined,
    deletedAt: undefined,
    createdBy: undefined,
    updatedBy: undefined,
    conf: undefined,
    fields: undefined,
  },
  // 表单校验
  rules: {
    name : [
      { required: true, message: "表单名不能为空", trigger: "blur" }
    ],
    status : [
      { required: true, message: "状态不能为空", trigger: "blur" }
    ],
  }
});
const {isShowDialog} = toRefs(state);
// 打开弹窗
const openDialog = async (row?: FlowFormTableColumns) => {
  resetForm();
  if(row) {
    await getFlowForm(row.id!).then((res:any)=>{
      const data = res.data;
      data.createdBy = data.createdUser?.userNickname
      data.updatedBy = data.updatedUser?.userNickname
      state.formData = data;
      setConfAndFields2(detailData, data.conf, data.fields)
    })
    if(row.dataId && row.dataId!=0){
      dataId.value = row.dataId
      //获取表单数据
      getFlowFormData({formId:row.id,dataId:row.dataId}).then((res:any)=>{
        formData.value = res.data.data
      })
    }
  }
  state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
const resetForm = ()=>{
  state.formData = {
    id: undefined,
    name: undefined,
    status: false ,
    remark: undefined,
    createdAt: undefined,
    updatedAt: undefined,
    deletedAt: undefined,
    createdBy: undefined,
    updatedBy: undefined,
    conf: undefined,
    fields: undefined,
  }
  dataId.value = 0
  formData.value = {};
};

const handleSubmit = (data:any)=>{
 const formData = {
    formId:state.formData.id,
    data :data,
    dataId:0
  }
  if(dataId.value!=0){
    //修改
    formData.dataId = dataId.value
    editFlowFormData(formData).then(()=>{
      ElMessage.success('修改成功');
      onCancel()
      emit('getFormDataList')
    })
  }else{
    //添加
    addFlowFormData(formData).then(()=>{
      ElMessage.success('发起成功');
      onCancel()
      emit('getFormDataList')
    })
  }

}
defineExpose({openDialog})
</script>
<style scoped>
.flow-flowForm-detail :deep(.el-form-item__label){
  font-weight: bolder;
}
.pic-block{
  margin-right: 8px;
}
.file-block{
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  margin-bottom: 5px;
  padding: 3px 6px;
}
.ml-2{margin-right: 5px;}
.form-create-show{
  width: 100%;
  padding: 16px;
}
</style>
